<template>
    <div class="msg_cont" v-loading="loading">
      <div class="cur title" @click="backFun"><i class="el-icon-arrow-left"></i>  <span style="margin-left: 1.6rem;">{{ titleMap }}</span></div>
      <template>
        <el-card shadow="never" :border="false" v-if="listData.length > 0">
          <div class="h_full flex_column_between" >
              <!-- 内容部分 -->
              <el-table :data="listData" style="width: 100%">
                <el-table-column prop="createdAt" label="测试时间" align="center">
                  <template #default="scope">
                    <div>{{ formatDate(scope.row.createdAt) }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="words" label="总词汇量" align="center"></el-table-column>
                <el-table-column prop="rightNumber" label="正确词汇数" align="center"></el-table-column>
                <el-table-column prop="wrongNumber" label="错误词汇数" align="center"></el-table-column>
                <el-table-column label="操作"  align="center">
                  <template #default="scope">
                    <div class="actions cur" @click="getDetailFun(scope.row.id)">
                      <p>查看报告</p>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
              <pagination :total="total" :currentPage="currentPage" :pageSize="pageSize"
                      @current-change="changePage"></pagination>
              </div>
          </el-card>
        <template v-else>
          <empty type="1" text="暂无测试记录"></empty>
        </template>
      </template>

      <!-- 报告 -->
      <vocabularyReport v-if="isShow" :info="infoData" @close="closeFun"></vocabularyReport>

    </div>
</template>

<script>
import vocabularyReport from '@/views/components/vocabularyReport'
import { vocabularyExamList, vocabularyExamDetail } from '@/api/vocabulary.js'
import bear_content from '@/views/components/bear_content.vue'

export default {
    components: {
        vocabularyReport,
        bear_content
    },
    data() {
        return {
            loading: false,
            titleMap: '我的测试记录',
            listData: [],
            currentPage: 1, // 当前页
            pageSize: 5, // 每页条数
            total: 0, // 总条数
            isShow:false,
            learnId: 0,
            flag: null, // 1: 从课程类型进入
            userId: '',
            infoData: {}
        }
    },
    mounted(){
        this.userId = this.$route.query.userId || 0
        this.learnId = this.$route.query.learnId || 0
        this.flag = this.$route.query.flag || null
        if (this.userId) {
            this.titleMap = '测试记录'
        }
        this.getList()
    },
    methods:{
        async getList() {
          this.loading = true
          let search = {
              page: this.currentPage,
          }
          if (this.userId) {
              search.userId = this.userId
          }
          await vocabularyExamList(search).then(res => {
                this.loading = false
                if (res.error === 0) {
                    this.listData = res.data.list
                    this.total = res.data.total
                    this.pageSize = res.data.perPage
                }
            })
        },
        //获取详情
        getDetailFun(id) {
          this.loading = true
          vocabularyExamDetail({
                id: id,
                userId: this.userId ? this.userId : 0
            }).then(res => {
                this.loading = false
                if (res.error === 0) {
                    this.infoData = res.data
                    if (this.infoData.teacher && !this.infoData.user) {
                        this.infoData.user = this.infoData.teacher
                    }
                    let createdTime = this.infoData.createdAt.split('-')
                    this.infoData.createdTime = createdTime[0] + '.' + createdTime[1] + '.' + createdTime[2]

                    this.isShow = true
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        changePage(page) {
            this.currentPage = page
            this.getList()
        },
        closeFun(){
            this.isShow=false
        },
        formatDate(time) {
            if (time) {
              let createdTime = time.split('-')
              time = createdTime[0] + '.' + createdTime[1] + '.' + createdTime[2]
            }
            return time
        },
        backFun() {
            if (this.$route.query.source) {
                this.$router.push(this.$route.query.source);
                return;
            };

            if (this.learnId) {
                this.$router.push({path:'/work/studytype', query:{learnId: this.learnId, userId: this.userId}})
                return
            }else if (this.flag == 1) {
                this.$router.push({path:'/work/studytype'})
                return
            }else{
                this.$router.push({path:'/vocabulary/exam'})
                return
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.msg_cont{
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 2.0rem;
    padding: 3.4rem 3.2rem;
}
.title{
  font-size: 2.4rem;
  font-size: 2.4rem;
  color: #1A1A1A;
}
.el-descriptions{
    margin-top: 4.8rem;
    margin-top: 4.8rem;
}
.el-card {
    width: 100%;
    height: 100%;
    border: none;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 1.6rem;
      padding-right: 1.6rem;
    }
    .actions {
      font-size: 1.8rem;
      font-size: 1.8rem;
      display: flex;
      justify-content: space-around;
      color: #019E69;
      > i:hover {
        color: rgba(114, 124, 245, 1);
        cursor: pointer;
      }
    }
  }
  ::v-deep .el-card__header{
  border-bottom:none;
 }
 ::v-deep .el-card__body{
  height: 100%;
  padding: 2.0rem 0;
 }
 ::v-deep .el-table::before{
  background-color:transparent !important;
 }
 ::v-deep .el-table {
  padding-right: 1.0rem;
   overflow-y: scroll;
   font-size: 2rem;
   &::-webkit-scrollbar {
        width: .6rem;
        height: .1rem;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: .5rem;
        background-color:#019E69;
    }
    &::-webkit-scrollbar-track {
        background: #fff;
        border-radius: .5rem;
    }
 }
</style>
